<template>
  <div class="app">
    <h1>{{msg}}，{{StudentName}}</h1>
    <!-- 父组件与子组件通信，方式一：传递函数（先在父组件定义一个函数供子组件使用）使用props的方式实现子组件给父组件传递数据 -->
    <School :getSchoolName="getSchoolName"/>
    
    <!-- 父组件与子组件通信，方式二：绑定一个自定义事件实现子组件给父组件传递数据（【第一种写法】，使用@ 或 v-on） -->
    <!-- <Student @atguigu="getStudentName" @demo="demo01"/> -->

    <!-- 父组件与子组件通信，方式二：绑定一个自定义事件实现子组件给父组件传递数据（【第二种写法】，使用ref） -->
    <Student ref="student" @click.native="showDemo"/>
    <!--
    tips:
      1.重点：给哪个实例对象绑定的事件由哪个实例对象来触发
        例如：父组件在Student组件身上绑定了自定义事件，就由Student组件来触发事件。
      
      2.当在组件上绑定原生DOM事件时，需要使用'native'修饰符 例如：@click.native="xxx"
    -->
  </div>
</template>

<script>
  // 引入Student组件
  import Student from './components/Student.vue'
  // 引入School组件
  import School from './components/School.vue'

  export default {
      name:'App',
      components:{Student,School},
      data(){
        return {
          msg:"你好啊~",
          StudentName:''
        }
      },
      methods:{
        getSchoolName(SchoolName){
          console.log("App组件收到了学校名： " + SchoolName);
        },

        getStudentName(StudentName,...params){ // 将不定数量的参数表示为一个数组（当子组件传过来的参数有多个时可以这样接收....params）
          console.log("App组件收到了学生名字： " + StudentName,params);
          this.StudentName = StudentName;
        },

        demo01(){
          console.log("dmeo事件被触发了");
        },

        showDemo(){
          alert(123);
        }
      },
      // 钩子函数
      mounted(){
        this.$refs.student.$on('atguigu',this.getStudentName); // 绑定自定义事件
        // this.$refs.student.$once('atguigu',this.getStudentName); // 绑定自定义事件（只执行一次）
      }
  }
</script>

<style scoped>
  .app{
    background-color: gray;
    padding: 5px;
  }
</style>